<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公开公告审批</title>
    <script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #apunit {
            padding: 0px;
            margin: 0px;
            height: 120%;
        }
        #apunit{
            border-top: 3px solid #0D9AFF;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0 rgba(200,200,200,0.50);
            padding: 25px;
            background: url(../../images/bg.png) no-repeat;
            background-size: 100% 100%;
            /*background-attachment: fixed;*/
            overflow: hidden;
        }
        .tab-title{
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left:10px;
            margin-bottom: 20px;
        }
        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }
        #excel {
            display: none;
        }
        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
        /*#apunit .el-input,
        #apunit .el-select,
        #apunit .el-input-number{
            width: 100%;
        }*/
        .listed .el-form-item__label{
            letter-spacing: 3px;
        }
        .el-textarea {
            /*width: 95%;*/
        }

        /* 搜索按钮样式修改 */
        #apunit .el-button.is-circle.search_btn{
            position: absolute;
            right: 0;
            top: 0;
            border: 0;
            background: none;
        }
        #apunit .el-button.is-circle.search_btn i{
            font-size: 17px;
        }
        .zcform .tab{
            border: 1px solid #DCDFE6;
        }
        .zcform .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #DCDFE6;
            border-radius: 0px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 10px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }
        .zcform .linkMan .el-input .el-input__inner{

            height: 60px;
        }
        .zcform .el-textarea__inner {
            display: block;
            resize: vertical;
            padding: 5px 15px;
            line-height: 1.5;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 120px;
            font-size: inherit;
            color: #606266;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #DCDFE6;
            border-radius: 0px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        }
        .zcform .el-input .el-input__clear {
            line-height: 30px;
        }
        .zcform .el-input__icon {
            line-height: 30px;
        }
        .zcform .el-form-item {
            margin-bottom: 0px;
        }
        .zcform .el-form-item__content {
            line-height: 30px;
            position: relative;
            font-size: 14px;
        }
        .zcform .el-form-item__error {
            color: #F56C6C;
            font-size: 12px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 0px;
            left: 114px;
            z-index: 99;
            width: 400px;
            text-align: left;
        }
        .zcform .red{
            color: #F56C6C;
        }
    </style>
</head>
<body>
<div id="apPublick">
    <el-row v-if="showApprovalBtn=='1'">
        <el-col :offset="2">
            <el-button type="warning" size="mini" @click="dialogApprovalForm=true;">审批</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="16" :offset="4">
            <el-form :model="gonggao" :rules="rules" ref="gonggao">
                <!--公开公告信息表-->
                <el-row style="margin-bottom: 10px;">
                    <el-col>
                        <h4 style="margin-top: 10px;font-size: 40px;text-align: center;">{{ gonggao.title }}</h4>
                    </el-col>
                </el-row>
                <el-row style="margin-bottom: 10px;padding-bottom: 10px;font-size: 24px;border-bottom: 1px solid #ddd;text-align: center;">
                    <el-col :span="5">
                        <span>{{ gonggao.createUser }}</span>
                    </el-col>
                    <el-col span="5">
                        <span>{{ gonggao.inputenTime }}</span>
                    </el-col>
                    <el-col :span="5">
                        <div style="float:right;">
                            <span v-if="(gonggao.publicType == 0) ? true : false">服务门户</span>
                            <span v-if="(gonggao.publicType != 0) ? true : false">工作门户</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div style="float:right;">
                            <span v-if="(gonggao.publicState == 0) ? true : false">未公开</span>
                            <span v-if="(gonggao.publicState != 0) ? true : false">公开</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="padding: 0 20px;font-size: 24px;">
                    <el-col :span="20" :offset="2">
                        <span style="word-break: break-all;" v-html="gonggao.attachContent"></span>
                    </el-col>
                </el-row>
                <el-row v-if="approvalShi.publishMsg != ''" style="padding: 0 20px;font-size: 24px;">
                    <el-col>
                        <span style="font-family: '宋体';">审批意见：</span>
                    </el-col>
                    <el-col :span="20" :offset="2">
                        <!--<pre><span>{{ approvalShi.publishMsg }}</span></pre>-->
                        <span style="word-break: break-all;" v-html="approvalShi.publishMsg"></span>
                    </el-col>
                </el-row>
                <el-row style="font-size: 23px;">
                    <el-col>
                        <el-form-item label="附件:" prop="enclosure" label-width="140px" style="font-size: 18px;">
                            <!--<el-input v-model="gonggao.enclosure" placeholder=""></el-input>-->
                            <iframe id="newFrame" style="overflow:hidden;height:200px;width:80%;" frameBorder="0"
                                    :src="link"></iframe>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
    <!-- 审批页面 -->
    <el-dialog title="" :visible.sync="dialogApprovalForm" center>
        <div>
            <el-form :model="approvalShi" :rules="approvalRules" ref="approvalShi" label-width="140px">
                <!--专家信用信息审批界面-->
                <el-row>
                    <el-col :span="10" class="tab-title">
                        审批界面
                    </el-col>
                </el-row>
                <el-row class="expertcredit_publicstate">
                    <el-col>
                        <el-form-item label="审批状态:" prop="publishType" label-width="120px">
                            <el-radio-group v-model="approvalShi.publishType">
                                <el-radio :label="1">通过</el-radio>
                                <el-radio :label="0">不通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin: 0 0 20px;">
                    <el-col :span="2" class="tab" style="padding-right: 12px;width: 120px;text-align: right;height: 30px;line-height: 30px;">
                        <span>审批意见:</span>
                    </el-col>
                    <el-col :span="18">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 8, maxRows: 8}"
                                placeholder="请输入审批意见"
                                maxlength="300"
                                show-word-limit
                                v-model="approvalShi.publishMsg">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <div style="float:right;">
                            <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="approvalList()">保存</el-button>
                            <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="dialogApprovalForm = false;">取消</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-dialog>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#apPublick',
        data() {
            return {
                uuid:'',
                link:'', // 附件iframe
                tableTotal:'',
                gonggao: {
                    publicId: '',// 表单id
                    title: '',
                    createUser: '',
                    inputenTime: '',
                    content: '',
                    publicType: '',
                    publicState: '',
                    enclosure: '',
                    attachContent: ''
                },
                // 审批
                approvalShi: {
                    publicId: '', // 表单id
                    publishType: '',
                    publishMsg: ''
                },
                approvalRules: {
                    publishType: [{
                        required: true,
                        message: '请选择审批状态',
                        trigger: 'blur'
                    }]
                },
                fileList: [], // 附件
                dialogApprovalForm: false,
                showApprovalBtn: false
            }
        },
        mounted(){
            console.log(window.location.href);
            var url = window.location.href;
            var param = url.split("?")[1].split("&");

            this.linkId = param[0].split("=")[1];
            this.showApprovalBtn = param[1].split("=")[1];
            console.log("======="+this.showApprovalBtn);
            console.log(this.linkId);
            this.getData(this.linkId);
        },
        methods: {
            // 审批
            approvalList(){
                this.approvalShi.publishMsg = this.approvalShi.publishMsg.replace(/[\n\r]/g,'<br/>');
                axios({
                    method: 'post',
                    url: '/dzjap/publick/approvalPublick',
                    data: this.approvalShi
                })
                .then(response => {
                    let data = response.data;

                    if (data.code == 200) {
                        let rowdata = data.data;
                        this.approvalShi.publicId = '';
                        this.approvalShi.publishType = '';
                        this.approvalShi.publishMsg = '';
                        // 置空父类的审批表单
                        this.$message({
                            type: 'success',
                            message: '审批完成!'
                        });

                        this.checkCancel();
                    } else {
                        this.$message.error(data.msg);
                        this.approvalShi.publishMsg = this.approvalShi.publishMsg.replace(/<br\/>/g, '\n');
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 调用父页面方法关闭弹窗
            checkCancel() {
                parent.vm.publicCancel();
            },
            // 查看
            getData(id){
                this.link="../upload/annex.html?uuid="+id+"&flag=0";
                axios({
                    method: 'get',
                    url: '/dzjap/publick/getPublick',
                    params: {
                        publicId: id
                    }
                })
                .then(response => {
                    let data = response.data;

                    if (data.code == 200) {
                        console.log(data);
                        let rowdata = data.data;

                        this.approvalShi.publishMsg = rowdata.publishMsg;
                        /*rowdata.attachContent = rowdata.attachContent.replace(/<br\/>/g, '\n');*/
                        this.gonggao = rowdata;
                        // 申请  表单id
                        if(this.showApprovalBtn){
                            this.approvalShi.publicId = rowdata.publicId;
                        }
                        // 修改日期格式
                        this.gonggao.inputenTime = this.gonggao.inputenTime.toString().substr(0,10);
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</html>